<template>
    <div class="wrap pt50">
        <div class="header mb35">
            <img class="mb20" src="../assets/logo.svg" alt="">
            <h1>华杉商城系统登录</h1>
        </div>
        <p class="mb25">
            <el-input prefix-icon="User" v-model="ruleForm.username" />
        </p>
        <p class="mb35">
            <el-input prefix-icon="Lock" type="password" v-model="ruleForm.password" show-password />
        </p>
        <el-button @click="goHome" class="login-btn" type="warning">确 定</el-button>
    
    </div>
  </template>
  
  <script setup>
    import {reactive} from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter()
    const ruleForm = reactive({
        username: 'admin',
        password: 'admin'
    })

    const goHome = ()=>{
        router.push("/");
    }
  </script>
  
  <style scoped>
  .wrap{width: 340px;margin: 0 auto;}
  .header{text-align: center;}
  .wrap img{height: 50px;}
  .wrap h1{font-size: 18px;font-weight: normal;}
  .login-btn{width: 100%;}
  </style>